<template>
  <div class="son">
    我是子组件aaaaaaaaa
    <!-- $attrs:接收非props属性  {属性名:值,属性名2:值2}
         $listeners:接收组件标签身上绑定的所有的方法
     -->
    <!-- v-bind
          标准用法：  v-bind:属性名=值  v-bind:属性名2=值2
                     v-bind="{属性名:值,属性名2:值2}"

         v-on
           标准用法：  v-on:事件名="方法"
                      v-on="{事件名:方法}"
     -->
    <img v-bind="$attrs" alt="">
    <h3>{{ $attrs }}</h3>
    <hr>
    <AaaSon v-bind="$attrs" v-on="$listeners" />

    <hr>
    <button @click="btnClick">拿到所有的方法</button>
    <button @click="$listeners.ooo">测试ooo方法</button>
  </div>
  <!-- <img alt=""> -->
</template>
<script>
import AaaSon from './AaaSon.vue'
export default {
  components: {
    AaaSon
  },
  props: ['num'],
  methods: {
    btnClick() {
      console.log(this.$listeners)
    }
  }
  // inheritAttrs: true // 非props传值（没有使用props接收的参数，默认放到最外层，不希望放到最外层，可以改成false）
}
</script>
<style lang="scss" scoped>
.son {
  width: 300px;
  height: 300px;
  border: 10px solid pink;
}
</style>
